<#include "/common/_itjson_layout.ftl" />
<@itjsonCommonLayout "jsoncheck">
    <!-- begin主体 -->



    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            
            


            <div class="alert alert-success alert-dismissible" role="alert">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">×</span></button>
                Json在线格式化工具，提供json解析视图查看器工具（Json解析视图查看器，将格式化Json字符串为规范的Json格式）
            </div>
            
            <div class="panel">
                <form id="form1" class="form-horizontal" action="/jsoncheck/" method="post">
                <div class="form-group">
                    <div class="col-sm-12">
                        <textarea onmouseover="this.focus();" id="RawJson" class="form-control" rows="16" style="max-height: 2222px;" placeholder="请输入要解析的Json字符串"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input value="格式化" onclick="Process()" class="btn btn-success" type="Button">&nbsp;&nbsp;&nbsp;&nbsp;
                        <span id="TabSizeHolder">缩进量
                            <select id="TabSize" onchange="TabSizeChanged()" class="btn btn-default">
                                <option value="1">1</option>
                                <option value="2" selected="selected">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                            </select>
                        </span>&nbsp;&nbsp;
                        <label for="QuoteKeys" class="btn btn-default">
                            <input id="QuoteKeys" onclick="QuoteKeysClicked()" checked="checked" type="checkbox">
                            引号
                        </label>
                        &nbsp;&nbsp; &nbsp; <a href="javascript:void(0);" onclick="SelectAllClicked()" class="btn btn-default">
                            全选</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input value="清空输入框" onclick="EmptyJsonCheck()" class="btn btn-danger" type="Button">
                        <span id="copyallcode" class="btn btn-success" data-clipboard-target="Canvas">复制完整代码</span>
                        <br>
                        <br>
                        <span id="CollapsibleViewHolder">
                            <label for="CollapsibleView" class="btn btn-success">
                                <input id="CollapsibleView" onclick="CollapsibleViewClicked()" checked="checked" type="checkbox">
                                显示控制
                            </label>
                        </span><span id="CollapsibleViewDetail"><a href="javascript:void(0);" onclick="ExpandAllClicked()" class="btn btn-default">展开</a> <a href="javascript:void(0);" onclick="CollapseAllClicked()" class="btn btn-default">叠起</a> <a href="javascript:void(0);" onclick="CollapseLevel(3)" class="btn btn-default">2级</a> <a href="javascript:void(0);" onclick="CollapseLevel(4)" class="btn btn-default">3级</a> <a href="javascript:void(0);" onclick="CollapseLevel(5)" class="btn btn-default">4级</a> <a href="javascript:void(0);" onclick="CollapseLevel(6)" class="btn btn-default">5级</a> <a href="javascript:void(0);" onclick="CollapseLevel(7)" class="btn btn-default">6级</a> <a href="javascript:void(0);" onclick="CollapseLevel(8)" class="btn btn-default">7级</a> <a href="javascript:void(0);" onclick="CollapseLevel(9)" class="btn btn-default">8级</a> </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-12">
                        <div class="alert alert-success alert-dismissible text-center" id="codeall" role="alert" style="display: none;">
                            <span id="errdiv"></span>
                        </div>
                    </label>
                </div>
                <div class="form-group">
                    <div id="Canvas" class="Canvas">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <div class="alert alert-success alert-dismissible text-center" id="copycodeall" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span></button>
                            <strong>复制成功!</strong> &nbsp;&nbsp;代码已经成功复制到剪切板&nbsp;&nbsp;可直接粘贴到任意地方.
                        </div>
                    </div>
                </div>
                </form>
            </div>
        </div>
    </div>
    <div class="alert alert-warning alert-dismissible text-center" role="alert">
        <span class="Span1left">以下原因会造成Json校验失败</span><br>
        <span class="Span1left">让你不容易查明真相的错误原因：</span><br>
        <span class="Span1left">1，Json字符串里的非数字类型键值没有带双引号</span><br>
        <span class="Span1left">2，Json中存在\t这样的制表符,看起来和空格一样,但是就是因为它的存在，导致校验不通过，去掉就可以了。</span>
        <br>
        <span class="Span1left">3，编辑器有Bom头也会造成Json校验失败</span><br>
    </div>
    <div class="accordion">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="list-group-item list-group-item-warning" data-toggle="collapse" href="#demo1">
                     Json字符串解析层级模式-Json解析视图查看器</a>
            </div>
            <div id="demo1" class="in collapse bs-docs-demoexample">
                <h5>
                    1,Json字符串在线格式化解析校验</h5>
                <h5>
                    2,可自定义Json字符串格式化后的缩进量展示效果</h5>
                <h5>
                    3,支持去除/添加Json字符串中的双引号</h5>
                <h5>
                    4,上下视图格式化查看Json的方式,您可以轻松的控制Json的折叠、展开模式</h5>
                <h5>
                    5,具备很详细准确的Json解析错误信息提示功能,给你超凡的在线操作查看Json字符串的体验</h5>
            </div>
        </div>
    </div>
    <br>
    
    <!-- 需要c.js m.js-->
    <script src="${contextPath}/them/1/js/c.js" type="text/javascript"></script>
    <script src="${contextPath}/them/1/js/m.js" type="text/javascript"></script>
    <script type="text/javascript">
        function EmptyJsonCheck() {
            document.getElementById("RawJson").value = "";
            $('#Canvas').html('');
            document.getElementById("RawJson").select();
        }
    </script>
</@itjsonCommonLayout>